<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>General</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
		

		
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/medile.css" rel='stylesheet' type='text/css' />
<link href="css/single.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/contactstyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/faqstyle.css" type="text/css" media="all" />
<!-- font-awesome icons -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- //font-awesome icons -->
<!-- news-css -->
<link rel="stylesheet" href="news-css/news.css" type="text/css" media="all" />
<!-- //news-css -->
<!-- list-css -->
<link rel="stylesheet" href="list-css/list.css" type="text/css" media="all" />
<!-- //list-css -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<script src="js/owl.carousel.js"></script>
<script>
	$(document).ready(function() { 
		$("#owl-demo").owlCarousel({
	 
		  autoPlay: 3000, //Set AutoPlay to 3 seconds
	 
		  items : 5,
		  itemsDesktop : [640,5],
		  itemsDesktopSmall : [414,4]
	 
		});
	 
	}); 
</script> 
<style>
/* 单行文本溢出 */
.single_line_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
}
</style>
</head>
	
<body>
<!-- header -->
	
<!-- //header -->
<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Sign In & Sign Up
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<div class="w3_login_module">
							<div class="module form-module">
							  <div class="toggle"><i class="fa fa-times fa-pencil"></i>
								<div class="tooltip">Click Me</div>
							  </div>
							  <div class="form">
								<h3>Login to your account</h3>
								<form action="#" method="post">
								  <input type="text" name="Username" placeholder="Username" required="">
								  <input type="password" name="Password" placeholder="Password" required="">
								  <input type="submit" value="Login">
								</form>
							  </div>
							  <div class="form">
								<h3>Create an account</h3>
								<form action="#" method="post">
								  <input type="text" name="Username" placeholder="Username" required="">
								  <input type="password" name="Password" placeholder="Password" required="">
								  <input type="email" name="Email" placeholder="Email Address" required="">
								  <input type="text" name="Phone" placeholder="Phone Number" required="">
								  <input type="submit" value="Register">
								</form>
							  </div>
							  <div class="cta"><a href="#">Forgot your password?</a></div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
	<script>
		$('.toggle').click(function(){
		  // Switches the Icon
		  $(this).children('i').toggleClass('fa-pencil');
		  // Switches the forms  
		  $('.form').animate({
			height: "toggle",
			'padding-top': 'toggle',
			'padding-bottom': 'toggle',
			opacity: "toggle"
		  }, "slow");
		});
	</script>
<!-- //bootstrap-pop-up -->
<!-- nav -->

<!-- //nav -->

<!-- /w3l-medile-movies-grids -->
	<div class="general-agileits-w3l">
		<div class="w3l-medile-movies-grids">

				<!-- /movie-browse-agile -->
				
				      <div class="movie-browse-agile">
					     <!--/browse-agile-w3ls -->
						<div class="browse-agile-w3ls general-w3ls">
								<div class="tittle-head">
									<h4 class="latest-text">地区搜索:${param.areaName} </h4><!-- 动态获取数据库类型 -->
								</div>
								     <div class="container" id="context">
										<div class="browse-inner">
											<div class="clearfix"> </div>
										</div>
									</div>
						</div>
				<!--//browse-agile-w3ls -->
						<div class="blog-pagenat-wthree">
							<ul id="blog-pagenat-wthree">
								<li><a class="frist" href="#">前一页</a></li>
								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a class="last" href="#">下一页</a></li>
							</ul>
						</div>
					</div>
				    <!-- //movie-browse-agile -->
				   <!--body wrapper start-->
				<!--body wrapper start-->
					<div class="review-slider">
						 <h4 class="latest-text">精选电影</h4>
						 <div class="container" >
						 	<div class="swiper-container w3_agile_banner_bottom_grid ">
							  <div class="swiper-wrapper">
							
						 	  </div>	
							</div> 
			 		</div>
			</div>	
		</div>
	<!-- //w3l-medile-movies-grids -->
	</div>
	<!-- //comedy-w3l-agileits -->
<!-- footer -->
		
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    );
});
</script>
<!-- //Bootstrap Core JavaScript -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
		
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
	<script>
	var areaName="${param.areaName}";
	var op="${param.op}";
	//初始化页面信息
	var numPage = 1;//当前页面
	
 	if(areaName!=null){
		 $.ajax({//ajax请求电影的地区
			 async:true,
			 type:"get",
		     dataType:"json", 
			 url:"${pageContext.request.contextPath}/MoviesSearch",
			 data:{
				 op:"searchMovieByArea",
				 areaName:areaName,
				 pageNum:numPage,//当前页面
				 pageSize:12//页面显示数固定数
			 },
			 
			 success:function(result,status,xhr){
					console.log(result)
					fullListMovies(result.data);
					fullPageInfo(result);
				
			 
			 },
			 error:function(error,status){
				 console.log(status);
				console.log(error)
			 }
			
		});  
	} 
	function fullListMovies(result){
		$("#context").empty();
		
		$("#context").append("<div class=\"browse-inner\">");
		$.each(result,function(index,movies){
			$("#context").append(" <div class=\"col-md-2 w3l-movie-gride-agile\">"+
						"<a href=\"single.jsp?id="+movies.movieId+"\" class=\"hvr-shutter-out-horizontal\"><img  style=\"height:268px; width:182px;\" src=\""+movies.moviePicture+"\" title=\"album-name\" alt=\" \" />"+
					    	"<div class=\"w3l-action-icon\">"+
					    	 	"<i class=\"fa fa-play-circle\" aria-hidden=\"true\"></i>"+
					    	 "</div>"+
						"</a>"+
					  "<div class=\"mid-1\">"+
						"<div class=\"w3l-movie-text\">"+
							"<h6><a href=\"single.jsp?id="+movies.movieId+"\" class=\"single_line_ellipsis\">"+movies.movieName+"</a></h6>"+							
						"</div>"+
						"<div class=\"mid-2\">"+
							"<p>"+movies.moviePublishDate+"</p>"+
							"<div class=\"block-stars\">"+
								"<ul class=\"w3l-ratings\">"+
									 "<li>评分:"+movies.movieRating+"</li>"+
								"</ul>"+
							"</div>"+
							"<div class=\"clearfix\"></div>"+
						"</div>"+	
					"</div>"+
				"</div>")}
			)
}
	function fullPageInfo(result){
		$("#blog-pagenat-wthree").empty();
		$("#blog-pagenat-wthree").append("<div style=\"visibility:hidden\"><span id=\"total\">"+result.pages+"</span><span id=\"pageNum\" >"+result.pageNum+"</span></div>");
		$("#blog-pagenat-wthree").append("<li><a class=\"frist\" href\"javascript:void(0)\">上一页</a></li>")
		for(var i = 1 ; i<=result.pages;i++){
			if(i==result.pageNum){
				$("#blog-pagenat-wthree").append("<li><a href=\"javascript:void(0)\" style=\"background-color: #27a9e3\"  class=\"indexpage\" index=\""+i+"\">"+i+"</a></li>");
			}else{
				
				$("#blog-pagenat-wthree").append("<li><a href=\"javascript:void(0)\"  class=\"indexpage\" index=\""+i+"\">"+i+"</a></li>");
			}
			
		}
		$("#blog-pagenat-wthree").append("<li><a class=\"last\" href=\"javascript:void(0)\">下一页</a></li>");	
	}
	$(document).on("click",".indexpage",function(){
		var numPage = $(this).attr("index");
		ajaxPageInfo(numPage,areaName);//传入当前页面和类型参数	
	})
			
	function ajaxPageInfo(numPage,areaName){//ajax分页
		
		
		 $.ajax({
			 async:true,
			 type:"get",
				dataType:"json", 
			 url:"${pageContext.request.contextPath}/MoviesSearch",
			 data:{
				 op:"searchMovieByArea",
				 pageNum:numPage,//当前页面
				 pageSize:12,//页面显示数固定数
				 areaName:areaName
			 },
			 
			 success:function(result,status,xhr){
					console.log(result)
					fullListMovies(result.data);
					fullPageInfo(result);
			 },
			 error:function(error,status){
				 console.log(status);
				console.log(error)
			 }
			
		});  
		
	}
	
	//上一页和下一页排序
	
	$(document).on("click",".frist",function(){
				numPage=$("#pageNum").text();
				if(numPage==1){
					numPage=1;
				}if(numPage>1){
					numPage=numPage-1;
				}
			ajaxPageInfo(numPage,areaName);//传入当前页面和类型参数	
	})
	$(document).on("click",".last",function(){
				numPage=parseInt($("#pageNum").text());
				if(numPage<$("#total").text()){
					numPage=numPage+1;
				}if(numPage==$("#total").text()){
					numPage=$("#total").text();
				}
			ajaxPageInfo(numPage,areaName);//传入当前页面和类型参数	
	})
	
	
	
	//底部精选电影排序(先评分后点击量)：
	
	 $.ajax({//ajax
			 async:true,
			 type:"get",
		     dataType:"json", 
			 url:"${pageContext.request.contextPath}/MoviesSearch",
			 data:{
				 op:"searchMoviesByQualityChoice",
				 score:"yes",
				 clickCount:"yes"
			 },
			 
			 success:function(result,status,xhr){
				 result=result.slice(0,6);
					console.log("总精选电影:"+result)
					
					 selectTheMovies(result);
					
			 
			 },
			 error:function(error,status){
				 console.log(status);
				console.log(error)
			 }
			
		});  
	function selectTheMovies(result){
		$(".swiper-wrapper").empty();
		$.each(result,function(index,movies){
			$(".swiper-wrapper").append("<div class=\"swiper-slide w3l-movie-gride-agile\">"+
			  		"<a href=\"single.jsp?id="+movies.movieId+"\" class=\"hvr-shutter-out-horizontal\"><img  style=\"height:268px; width:182px;\"  src=\""+movies.moviePicture+"\" title=\"album-name4\" class=\"img-responsive\" alt=\" \" />"+
						"<div class=\"w3l-action-icon\"><i class=\"fa fa-play-circle\" aria-hidden=\"true\"></i></div>"+
					"</a>"+
					"<div class=\"mid-1 agileits_w3layouts_mid_1_home\">"+
							"<div class=\"w3l-movie-text\">"+
								"<h6><a href=\"single.jsp?id="+movies.movieId+"\">"+movies.movieName+"</a></h6>"+							
							"</div>"+
							"<div class=\"mid-2 agile_mid_2_home\">"+
								"<p style=\" float: unset;line-height: 15px;\">"+movies.moviePublishDate+"</p>"+
								"<div class=\"block-stars\">"+
									"<ul class=\"w3l-ratings\">"+
										"<li style=\"position: absolute;left: 70px;\">评分:"+movies.movieRating+"</li>"+
									"</ul>"+
								"</div>"+
								"<div class=\"clearfix\"></div>"+
							"</div>"+
					"</div>"+
			"</div>");	
			
			
		});
	}
	
	
	</script>
		
		<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">  
		<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">  
		<script src="https://unpkg.com/swiper/js/swiper.js"> </script>
		<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
		<script>
			
			var appendNumber = 4;
			var prependNumber = 1;
			var swiper = new Swiper('.swiper-container', {
				  loop: true,
				  slidesPerView: 6,
				  centeredSlides: false,
				  spaceBetween: 0,
				  loopedSlides:6,
			  autoplay: {
			      delay: 2500,
			      disableOnInteraction: false,
			   },
			  pagination: {
			    el: '.swiper-pagination',
			    clickable: true,
			  },
			  navigation: {
			    nextEl: '.swiper-button-next',
			    prevEl: '.swiper-button-prev',
			  },
			});
			</script>
	
	
	
		
</body>
</html>